<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>时钟</title>
  <style>
    body {  }
    .page { width: 100%; height: 100%; }
    .time_container, .date_container { width: 100%; margin: auto; text-align: center; }
    .date { font-size: 4rem; }
    .time { font-size: 7rem; }
    .calendar_{ width: 100%; }
    .root_head { font-size: 3rem; margin: 0; padding: 0; height: 80px; border: 2px solid; }
    .root { font-size: 2rem; margin: 0; padding: 0; height: 106px; border: 2px solid; }
    .item {
      list-style: none;
      width: 14.1%;
      height: 106px;
      border-right: 2px solid;
      border-bottom: 2px solid;
      text-align: center;
      float: left;
    }
    .item.li-head {
      height: 80px;
    }
    .item:nth-child(7n){ border-right: none; }
  </style>
</head>

<body style="color: #000000; background-color: #ffffff;">
  <div class="page">
    <div class="date_container">
      <div class="date" id="date">
        <span id="day_y">1989</span>/<span id="day_m">5</span>/<span id="day_d">20</span>
        星期<span id="week_i">六</span>
      </div>
    </div>
    <div class="time_container">
      <div class="time" id="time">
        <span id="time_h">12</span>:<span id="time_m">34</span>.<span id="time_s">**</span>
      </div>
      <div><span style="font-size: 1.5em">-----</span></div>
    </div>
    <div class="calendar_">
      <div><ul id="week_header" class="root_head"></ul></div>
      <div id="calendar_data" class="calendar_data"></div>
    </div>
    <div>
      <span id="year_rem_days" style="font-size: 2em">今年总天数 x,已度过 x,占比 x,剩余 x</span>
    </div>
  </div>
<script>
(function () {
  var tmp_f= tmp_h= tmp_d= tmp_m= tmp_y= tmp_w= -1 ,
  weekList = ['日','一','二','三','四','五','六'];
  function byId(id){ return document.getElementById(id);}
  var id_s = byId("time_s");
  function updateText(el,num,tmp){
    if( num == tmp ){ return true; }
    tmp = num;
    byId(el).innerText = ('0' + num).slice(-2);
    return false;
  }

  window.updateDate = function() {
    var date = new Date();
    // 秒
    id_s.innerText = ('0' + date.getSeconds()).slice(-2);
    // 分钟
    if( updateText("time_m",date.getMinutes(),tmp_f) ){ return; }
    // 小时
    if( updateText("time_h",date.getHours(),tmp_h) ){ return; }
    // 日
    if( updateText("day_d",date.getDate(),tmp_d) ){ return; }
    // 星期
    tmp_w = date.getDay();
    byId("week_i").innerText = weekList[date.getDay()];
    // 计算年剩余天数
    yearRemDays(date);
    // 本月第一天星期几
    var startIndex = new Date(date.getFullYear(), date.getMonth(), 1).getDay();
    colorElByBody(document.getElementsByClassName('li-h-'+date.getDay())[0]);
    colorElByBody(document.getElementsByClassName('li-d-'+(startIndex + date.getDate() - 1))[0]);
    // 月
    if( date.getMonth() == tmp_m ){ return; }
    tmp_m = date.getMonth();
    byId("day_m").innerText = (date.getMonth() + 1);
    // 日历更新
    calendarDataReset(date,startIndex);

    if( date.getFullYear() == tmp_y ){ return; }
    // 年
    tmp_y = date.getFullYear();
    byId("day_y").innerText = date.getFullYear();
  }

  function calendarDataReset(date,startIndex) {
    // 本月天数
    var days = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
    // 日志内容重置
    var items = document.getElementsByClassName('li-data'),max = startIndex + days;
    for (var i = 0,len = items.length; i < len; i++) {
      items[i].innerHTML = (i >= max || i < startIndex) ? '-' : (i - startIndex + 1);
    }
  }
  function yearRemDays(date){
    //计算年剩余天数,年结束、开始时间、每天秒数
    var end = new Date(date.getFullYear(),11,31,23,59,59),
    start = new Date(date.getFullYear()-1,11,31,23,59,59),
    dayMs = 24*60*60*1000;
    // 总天数
    var totalDay = Math.round((end.getTime()-start.getTime())/dayMs);
    // 当前天数
    var useDay = Math.round((date.getTime()-start.getTime())/dayMs);
    byId("year_rem_days").innerText 
    = '今年总天数 '+totalDay+',已过 '+useDay+',占 '+Math.round((useDay*100)/totalDay)+'%,余 '+(totalDay-useDay);
  }
  function colorElByBody(el) {
    // 颜色反转
    el.style.color = document.body.style.backgroundColor;
    el.style.background = document.body.style.color;
  }
  function calendarInit() {
    // 日历内容 初始化
    var date = new Date(),len = weekList.length;

    var li_1 = '<li class="item',li_2 = '" >',close = "</li>",htm_s = '';
    var li_h=' li-head li-h-',li_d=' li-data li-d-';
    // 初始化日历头
    for (var i = 0; i < weekList.length; i++) { htm_s += li_1 + li_h + i + li_2 + weekList[i] + close; }
    byId("week_header").innerHTML = htm_s;
    // 初始化日历内容
    htm_s = '';
    for (var line = 0; line < 6; line++) {
      htm_s += '<div><ul class="root">';
      for (var i = 0; i < len; i++) { htm_s += li_1 + li_d + (line * len + i) + li_2 + '-' + close; }
      htm_s += '</ul></div>';
    }
    byId("calendar_data").innerHTML = htm_s;

    yearRemDays(date);
  }

  calendarInit();
  updateDate();
  setInterval("updateDate()", 1000);
})();
</script>
</body>
</html>